<template>
    <div class="location-detail">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card class="detail-card" v-if="location">
        <div class="image-container">
          <img :src="location.photo" class="location-photo" alt="Location Photo"/>
        </div>
        <div class="location-info">
          <h2 class="location-name">{{ location.name }}</h2>
          <p>位置: {{ location.address }}</p>
          <p>类型: {{ location.type }}</p>
          <p>预约人数: {{ location.number }} 人</p>
          <p>创建时间: {{ location.createTime }}</p>
          <p>更新时间: {{ location.updateTime }}</p>
          <el-button type="primary" @click="editLocation">编辑地点</el-button>
          <el-button type="danger" @click="deleteLocation">删除地点</el-button>
        </div>
      </el-card>
  
      <el-dialog title="提示" :visible.sync="isDeleteDialogVisible" @close="isDeleteDialogVisible = false">
        <span>确定删除此地点吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDeleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { LocationListService, deleteLocationService } from '@/api/location'; // 引入 API 服务
  import { ElMessage } from 'element-plus';
  
  const route = useRoute();
  const location = ref(null);
  const isDeleteDialogVisible = ref(false);
  const allLocations = ref([]); // 用于存储所有地点信息
  
  const fetchAllLocations = async () => {
    try {
      const response = await LocationListService(); // 获取所有地点信息
      allLocations.value = response.data; // 假设返回的数据在data字段内
      filterLocationById(); // 根据 ID 过滤出指定的地点
    } catch (error) {
      ElMessage.error('获取地点列表失败');
    }
  };
  
  const filterLocationById = () => {
    const locationId = route.params.locationId; 
    location.value = allLocations.value.find(loc => loc.id === locationId); // 根据 ID 查找对应地点
    if (!location.value) {
      ElMessage.error('没有找到该地点');
    }
  };
  
  const deleteLocation = () => {
    isDeleteDialogVisible.value = true;
  };
  
  const confirmDelete = async () => {
    const locationId = location.value.id; // 从获取的地点对象中获取 ID
    try {
      await deleteLocationService(locationId); // 使用 deleteLocationService 进行删除
      ElMessage.success('地点删除成功');
      // 删除后跳转回地点列表页面
      router.push('/user/location');
    } catch (error) {
      ElMessage.error('删除地点失败');
    }
  };
  
  const editLocation = () => {
    // Navigate to the edit page with the locationId
    const locationId = location.value.id; // 从获取的地点对象中获取 ID
    router.push({ name: 'EditLocation', params: { locationId } }); // 假设你已经设置了 EditLocation 路由
  };
  
  onMounted(fetchAllLocations);
  </script>
  
  <style scoped>
  .location-detail {
    margin: 20px;
  }
  
  .detail-card {
    padding: 20px;
    display: flex;
  }
  
  .image-container {
    width: 200px; /* 固定图片容器宽度 */
    height: 200px; /* 固定图片容器高度 */
    overflow: hidden; /* 隐藏超出部分 */
  }
  
  .location-photo {
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover; /* 保持图片比例并裁剪 */
    border-radius: 5px; /* 照片圆角 */
  }
  
  .location-info {
    padding-left: 20px;
  }
  
  .location-name {
    color: #42b983;
  }
  </style>
  